<template>
    <div class="sys-org-container">
        <el-dialog v-model="state.isShowDialog" draggable :style="{ 'height': '500px' }">
            <template #header>
                <div style="color: #fff">
                    <el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit />
                    </el-icon>
                    <span> {{ props.title }} </span>
                </div>
            </template>
            <el-table :data="state.ruleForm" :header-cell-style="{
                background: 'var(--el-color-primary)',
                height: '25px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
            }" height="353">
                <el-table-column label="料箱编号" prop="workBinNum" align="center" show-overflow-tooltip />
                <el-table-column label="库位编号" prop="storageNum" align="center" show-overflow-tooltip />
                <el-table-column label="生产批次" prop="productionLot" align="center" show-overflow-tooltip />
                <el-table-column label="区域名称" prop="regionName" align="center" show-overflow-tooltip />
                <el-table-column label="库存数量" prop="iCountAll" align="center" show-overflow-tooltip />
                <el-table-column label="生产时间" prop="productionDate" align="center" show-overflow-tooltip />
                <el-table-column label="入库时间" prop="createTime" align="center" show-overflow-tooltip />
                <el-table-column label="备注" prop="inventoryRemake" align="center" show-overflow-tooltip />
            </el-table>

            <el-pagination v-model:current-page="state.queryParams.page"
				v-model:page-size="state.queryParams.pageSize" :page-sizes="[10,20,30,40]"
				layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
				@size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
  
            <!-- <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancel">确认</el-button>

                </span>
            </template> -->
        </el-dialog>
    </div>
</template>

<script lang="ts" setup name="sysEditOrg">
import { onMounted, reactive, ref } from 'vue';
import { WmsApi } from '/@/api/wh';
const props = defineProps({
    title: String
});
const emits = defineEmits(['handleQuery']);
const ruleFormRef = ref();
const state = reactive({
    isShowDialog: false,
    ruleForm: {},
    materielWorkBins: [],
    queryParams: {
        page: 1,
        pageSize: 20
    },
    currentMateriel:'',
    total:0
});

onMounted(async () => {


});
// const combine = computed(() => count.value + 1)
// 打开弹窗
const openDialog =(row: any) => {
    state.currentMateriel=row.materielNum
     //请求当前物料的库存详情
    query();
};

//请求页面
const query=()=>{
    WmsApi().InvtoryDetailGet(state.currentMateriel, state.queryParams.page, state.queryParams.pageSize)
        .then(function (res) {
            console.log(res);
            state.ruleForm = res.data.result.items;
            state.total=res.data.result.total
            state.isShowDialog = true;

        })
        .catch(function (error) {
            console.log(error);

        });
}
// 关闭弹窗
const closeDialog = () => {
    emits('handleQuery', true);
    state.isShowDialog = false;
};

// 取消
const cancel = () => {
    state.isShowDialog = false;
};

// 提交
const handleSizeChange = (val: number) => {
		state.queryParams.pageSize = val;
		query();
	};
	const handleCurrentChange = (newVal: number) => {
		state.queryParams.page = newVal;
		query();
	};

// 导出对象
defineExpose({ openDialog });
</script>
